<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    默认情况下，组件开始标签与闭合标签中的内容是不渲染的。
    如果需要渲染的话，则需要在组件的模板中通过 slot 元素来占位



   -->
    <div id="app">
      <hello>
        <button>按钮1</button>
        <button>按钮2</button>
      </hello>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({});

      app.component("Hello", {
        template: `
        <div>
          <slot></slot>
          <h2>Hello</h2>  
          <slot></slot>
        </div>
      `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
